<template>
  <div>
    <day_range_picker
        v-model="date"
        range-interval='4'
        value-format="yyyy-MM-dd"
        @change="dateChange"
        format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </day_range_picker>
    <el-button style="margin-left: 6px;" size="mini" @click="changeDateType('WEEK')">近一周</el-button>
    <el-button size="mini" @click="changeDateType('MONTH')">近一月</el-button>
    <el-radio-group style="margin-left: 24px" size="mini" v-model="value">
      <div v-if="values.length>1">
        <el-radio-button v-for="item in values" :label="item"></el-radio-button>
      </div>
      <div v-else>
        <el-button v-for="item in values" type="primary" size="mini">{{item}}</el-button>
      </div>
    </el-radio-group>
    <el-row style="margin-top: 12px">
      <el-col :span="6" >
        <el-card shadow='never' style="margin-right:10px;height: 270px;" >
          <span slot="header">
            <span style="font-weight: bold">顶层数据</span>
          </span>
          <el-row>
            <el-col :span="13">
              <echart style="margin-left: -35px;margin-top: -5px;height: 230px;" :option="option1"/>
            </el-col>
            <el-col :span="11">
              <div class="top_data_progress_box" style="height: 230px;width:265px;margin-left: -45px;">
                <div class="top_data_progress_flex" style="width: 100%;height: 155px;z-index: 1">
                  <div class="top_data_progress">
                    <div class="top_data_progress_text">平均负差</div>
                    <div style="width: 60%"><el-progress :percentage="average['percent']" :show-text="false" :format="format" color="#3370FF" :define-back-color="$store.getters.theme=='light'?'':'#19387F'" :text-color="$store.getters.theme=='light'?'':'#FFFFFF'"></el-progress></div>
                    <div class="top_data_progress_text" :style="{color:$store.getters.theme=='light'?'#000000':'#FFFFFF'}" style="margin-left:12px;width: 50px;">{{average['data']}}</div>
                  </div>
                  <div class="top_data_progress">
                    <div class="top_data_progress_text">异常捆数</div>
                    <div style="width: 60%"><el-progress :percentage="anomaly_number['percent']" :show-text="false" :format="format" color="#3370FF" :define-back-color="$store.getters.theme=='light'?'':'#19387F'" :text-color="$store.getters.theme=='light'?'':'#FFFFFF'"></el-progress></div>
                    <div class="top_data_progress_text" :style="{color:$store.getters.theme=='light'?'#000000':'#FFFFFF'}" style="margin-left:12px;width: 50px;">{{anomaly_number['data']}}</div>
                  </div>
                  <div class="top_data_progress">
                    <div class="top_data_progress_text">稳定率</div>
                    <div style="width: 60%"><el-progress :percentage="stability_ratio['percent']" :show-text="false" :format="format" color="#3370FF" :define-back-color="$store.getters.theme=='light'?'':'#19387F'" :text-color="$store.getters.theme=='light'?'':'#FFFFFF'"></el-progress></div>
                    <div class="top_data_progress_text" :style="{color:$store.getters.theme=='light'?'#000000':'#FFFFFF'}" style="margin-left:12px;width: 50px;">{{stability_ratio['data']}}</div>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="12" >
        <el-card class="biaoti" shadow='never' style="margin-left: 2px;margin-right: 2px;height: 270px;">
          <span slot="header">
            <span style="font-weight: bold">班组统计</span>
<!--            <table-change @change="tableSize1 = $event" style="float: right;"/>-->
          </span>
          <u-table
              size="mini"
              :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
              :data="tableData"
              row-key="id"
              @row-click="rowClick"
              highlight-current-row
              style="margin-top: -20px">
            <u-table-column
                prop="level"
                height="22"
                align="center"
                min-width="45"
                label="班组">
            </u-table-column>
            <u-table-column
                prop="difference"
                header-align="center"
                align="right"
                min-width="65"
                label="平均负差">
              <template slot-scope="scope">
                  <span v-if="scope.row['difference']==null">
                    0
                  </span>
                <span class="cause" v-else>
                    {{scope.row['difference']}}
                  </span>
              </template>
            </u-table-column>
            <u-table-column
                prop="anomaly"
                header-align="center"
                align="right"
                min-width="65"
                label="异常捆数">
            </u-table-column>
            <u-table-column
                prop="stability"
                header-align="center"
                align="right"
                min-width="85"
                label="稳定率">
              <template slot-scope="scope">
                  <span v-if="scope.row['stability']==null">
                    0%
                  </span>
                <span class="cause" v-else>
                    {{scope.row['stability']}}
                  </span>
              </template>
            </u-table-column>
            <u-table-column
                prop="more_bundle"
                header-align="center"
                align="right"
                min-width="65"
                label="多支捆数">
            </u-table-column>
            <u-table-column
                prop="more_number"
                header-align="center"
                align="right"
                min-width="65"
                label="多支支数">
              <template slot-scope="scope">
                <span v-if="scope.row['more_number']==null">
                  0
                </span>
                <span class="cause" v-else>
                  {{scope.row['more_number']}}
                </span>
              </template>
            </u-table-column>
            <u-table-column
                prop="less_bundle"
                header-align="center"
                align="right"
                min-width="65"
                label="少支捆数">
            </u-table-column>
            <u-table-column
                prop="less_number"
                header-align="center"
                align="right"
                min-width="65"
                label="少支支数">
              <template slot-scope="scope">
                <span v-if="scope.row['less_number']==null">
                  0
                </span>
                <span class="cause" v-else>
                  {{scope.row['less_number']}}
                </span>
              </template>
            </u-table-column>
            <u-table-column align="center" label="负差区间分布占比" >
              <u-table-column
                  prop="interval1"
                  header-align="center"
                  align="right"
                  min-width="70"
                  :label="'<'+negative.interval_one.replace('-','')">
                <template slot-scope="scope">
                  <span v-if="scope.row['interval1']=='100.00%'">
                    100%
                  </span>
                    <span class="cause" v-else>
                    {{scope.row['interval1']}}
                  </span>
                </template>
              </u-table-column>
              <u-table-column
                  prop="interval2"
                  header-align="center"
                  align="right"
                  min-width="70"
                  :label="negative.interval_one.replace('-','')+'-'+negative.interval_two.replace('-','')">
                <template slot-scope="scope">
                  <span v-if="scope.row['interval2']=='100.00%'">
                    100%
                  </span>
                  <span class="cause" v-else>
                    {{scope.row['interval2']}}
                  </span>
                </template>
              </u-table-column>
              <u-table-column
                  prop="interval3"
                  header-align="center"
                  align="right"
                  min-width="70"
                  :label="negative.interval_two.replace('-','')+'-'+negative.interval_three.replace('-','')">
                <template slot-scope="scope">
                  <span v-if="scope.row['interval3']=='100.00%'">
                    100%
                  </span>
                  <span class="cause" v-else>
                    {{scope.row['interval3']}}
                  </span>
                </template>
              </u-table-column>
              <u-table-column
                  prop="interval4"
                  header-align="center"
                  align="right"
                  min-width="70"
                  :label="negative.interval_three.replace('-','')+'-'+negative.interval_four.replace('-','')">
                <template slot-scope="scope">
                  <span v-if="scope.row['interval4']=='100.00%'">
                    100%
                  </span>
                  <span class="cause" v-else>
                    {{scope.row['interval4']}}
                  </span>
                </template>
              </u-table-column>
              <u-table-column
                  prop="interval5"
                  header-align="center"
                  align="right"
                  min-width="70"
                  :label="negative.interval_four.replace('-','')+'-'+negative.interval_five.replace('-','')">
                <template slot-scope="scope">
                  <span v-if="scope.row['interval5']=='100.00%'">
                    100%
                  </span>
                  <span class="cause" v-else>
                    {{scope.row['interval5']}}
                  </span>
                </template>
              </u-table-column>
              <u-table-column
                  prop="interval6"
                  header-align="center"
                  align="right"
                  min-width="70"
                  :label="'>'+negative.interval_five.replace('-','')">
              </u-table-column>
              <template slot-scope="scope">
                  <span v-if="scope.row['interval6']=='100.00%'">
                    100%
                  </span>
                <span class="cause" v-else>
                    {{scope.row['interval6']}}
                  </span>
              </template>
            </u-table-column>

          </u-table>
        </el-card>
      </el-col>
      <el-col :span="6" >
        <el-card shadow='never' style="margin-left: 10px;height: 270px;">
          <span slot="header">
            <span style="font-weight: bold">数据分析</span>
          </span>
          <echart style="margin: 12px;margin-top: -30px;height: 255px;" :option="option2"/>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow='never' style="margin-top: 12px;height: 250px;">
        <span slot="header">
          <span style="font-weight: bold">差值趋势图</span>
        </span>
      <echart style="margin: 12px;margin-top: -30px;height: 228px;" :option="option3"/>
    </el-card>
    <el-row style="margin-top: 12px">
      <el-col :span="12">
        <el-card class="data_details" shadow='never' style="margin-right:6px" :style="{height:lastHeight+'px'}">
          <span slot="header">
            <table-change @change="tableSize2 = $event" style="float: right;"/>
            <span style="font-weight: bold">数据明细</span>
          </span>
          <u-table
              :size="tableSize2"
              :cell-style="({ column })=>column.type==='index'&&'color:#999999'"
              :data="tableData2"
              :height="lastHeight-50"
              row-key="id"
              :row-height="1"
              use-virtual
              highlight-current-row>
            <u-table-column
                prop="timeID"
                header-align="center"
                align="center"
                height="25"
                min-width="150"
                label="称重时间">
            </u-table-column>
            <u-table-column
                prop="process"
                header-align="center"
                align="left"
                min-width="60"
                label="产线">
            </u-table-column>
            <u-table-column
                prop="level"
                align="center"
                min-width="60"
                label="班组">
            </u-table-column>
            <u-table-column
                prop="specs"
                header-align="center"
                align="right"
                min-width="60"
                label="规格">
            </u-table-column>
            <u-table-column
                prop="length"
                header-align="center"
                align="right"
                label="定尺长度">
            </u-table-column>
            <u-table-column
                prop="steelyard"
                header-align="center"
                align="center"
                label="称点名称">
            </u-table-column>
            <u-table-column
                prop="number"
                header-align="center"
                align="right"
                label="每捆支数">
            </u-table-column>
            <u-table-column
                prop="theoreticalWeight"
                header-align="center"
                align="right"
                label="理论重量">
            </u-table-column>
            <u-table-column
                prop="actualWeight"
                header-align="center"
                align="right"
                label="实际捆重">
            </u-table-column>
            <u-table-column
                prop="difference"
                header-align="center"
                align="right"
                label="负差">
            </u-table-column>
          </u-table>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow='never' style="margin-left:6px" :style="{height:lastHeight+'px'}">
           <span slot="header">
            <span style="font-weight: bold">趋势分析</span>
          </span>
          <echart :style="{height:lastHeight-52+'px'}" style="margin: 12px;margin-top: 0;" :option="
option4"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echartOptions from '../util/ateelBarEchartOptions';
import TableChange from "@/components/table-change/index.vue";
import Echart from "@/components/echart/index.vue";

export default {
  components: {Echart, TableChange},
  name: "steel-bar",
  data(){
    return{
      date:[this.$getTodayDate(),this.$getTodayDate()],
      value:12,
      values:[],
      score:0,
      average: {
        data: 0,
        percent: 0
      },
      anomaly_number:{
        data: 0,
        percent: 0
      },
      stability_ratio:{
        data: 0,
        percent: 0
      },
      titleLevel:'',
      tableSize1:'',
      tableSize2:'',
      tableData: [],
      tableData2: [],
      negative:{
        interval_one:'',
        interval_two:'',
        interval_three:'',
        interval_four:'',
        interval_five:'',
      },
      data:[],
      option1: {},
      option2: {},
      option3: {},
      option4: {},
      echartOptions:echartOptions
    }
  },
  mounted() {
    let that = this
    that.is_data()
    setInterval(function(){
      that.all(true)
    },10000)
  },
  watch:{

  },
  methods:{
    is_data(){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/is_data',{time1:this.date[0],time2:this.date[1],specs:this.value}).then(res=>{
        if(res.data.length>0){
          this.values = res.data
          this.value = this.values[0]
        }else{
          this.values = []
          this.value=12
        }
        this.all()
      }).catch(err=>{
        console.log(err)
      })
    },
    all(interval = false){
      this.top_data(interval)
      this.title_data(interval)
      this.data_analysis(interval)
      this.difference_trend(interval)
      this.detail(interval)
      this.trend(interval)
    },
    dateChange() {
      this.is_data()
    },
    format(percentage) {
      return percentage
    },
    //顶层数据
    top_data(interval){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/top_level_data',{time1:this.date[0],time2:this.date[1],specs:this.value},interval).then(res=>{
          this.option1 = JSON.parse(JSON.stringify(this.echartOptions['option1']));
          this.option1.title.text = res.data.score
          this.option1.series[0].data[0].value = res.data.score
          this.option1.series[0].data[1].value = 100-res.data.score
          this.average = res.data.average
          this.anomaly_number = res.data.anomaly
          this.stability_ratio = res.data.stability_ratio
      }).catch(err=>{
        console.log(err)
      })
    },
    //标题数据
    title_data(interval){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/title',{time1:this.date[0],time2:this.date[1],specs:this.value},interval).then(res=>{
          this.tableData = res.data
          this.negative = res.negative
      }).catch(err=>{
        console.log(err)
      })
      return true
    },
    //数据分析
    data_analysis(interval){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/data_analysis',{time1:this.date[0],time2:this.date[1],specs:this.value},interval).then(res=>{

          this.option2 = JSON.parse(JSON.stringify(this.echartOptions['option2']));

          if (res.data.legend.length > 0) {
            this.option2.legend.data = res.data.legend
            this.option2.legend.data.splice(3, 0, '')
            this.option2.xAxis[0].data = res.data.x
            let ii = 0;
            for (let i in res.data.sections) {
              this.option2.series.push({
                name: i,
                type: 'bar',
                barWidth: 8,
                data: res.data.sections[i],
                itemStyle: {
                  barBorderRadius: [10, 10, 0, 0],
                  color: res.data.color[ii]
                }
              })
              ii++;
            }
          }
        // }
        // console.log(this.option2,'数据分析')
      }).catch(err=>{
        console.log(err)
      })
    },
    //点击标题行
    rowClick(row, column, event){
      this.titleLevel = row.level
      this.difference_trend()
    },
    //差值趋势
    difference_trend(interval){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/difference_trend',{time1:this.date[0],time2:this.date[1],specs:this.value,level:this.titleLevel},interval).then(res=>{
          this.option3 = JSON.parse(JSON.stringify(this.echartOptions['option3']));
        this.option3.xAxis.data = res.data.x
        this.option3.yAxis.max = res.data.max
        this.option3.yAxis.min = res.data.min
        this.option3.series[0].data = res.data.data
        console.log(res.data.marking)
        this.option3.series[0].markLine.data[0].yAxis = res.data.marking['marking_one'];
        this.option3.series[0].markLine.data[1].yAxis = res.data.marking['marking_two'];
        this.titleLevel = ''
      }).catch(err=>{
        console.log(err)
      })
    },
    //数据明细
    detail(interval){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/detail',{time1:this.date[0],time2:this.date[1],specs:this.value},interval).then(res=>{
        this.tableData2 = res.data
      }).catch(err=>{
          console.log(err)
      })
    },
    //趋势分析
    trend(interval){
      this.$http.get('http://10.6.80.103:97/negative_difference/index/trend',{time1:this.date[0],time2:this.date[1],specs:this.value},interval).then(res=>{
          this.option4 = JSON.parse(JSON.stringify(this.echartOptions['option4']));
        this.option4.xAxis.data = res.data.x
        this.option4.series[0].data = res.data.data

      }).catch(err=>{
        console.log(err)
      })
    },
    //时间近一周/近一个月
    getHandelData(num) {
      // 开始时间
      this.endTimeData = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + '23:59:59'
      var date2 = new Date(new Date())
      // num 为当前传入入参，-为之前  +为之后 0为当日
      date2.setDate(new Date().getDate() - num)
      // 结束时间
      this.startTimeData = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate() + ' ' + '00:00:00'
      return this.startTimeData
    },
    changeDateType(type) {
      switch (type) {
        case 'WEEK':
          this.getHandelData(6)
          break
        case 'MONTH':
          this.getHandelData(29)
          break
      }
      this.date =[this.startTimeData,this.endTimeData]

      this.is_data()
    }
  },
  computed:{
    documentHeight(){
      return this.$store.getters.documentHeight
    },
    lastHeight() {
      return this.documentHeight-681
    }
  }
}
</script>

<style scoped>
::v-deep .el-card__body{
  padding-top: 0;
}
.top_data_progress_box{
  margin-top: -5px;
  display: flex;
  align-items: center;
}
.top_data_progress_flex{
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
.top_data_progress{
  display: flex;
  align-items: center;
  font-size: 14px;
  /*margin-top: 10%;*/
}
.top_data_progress_text{
  /*margin-right: 12px;*/
  color: #999999;
  width: 70px;
}
::v-deep .el-table th.el-table__cell > .cell{
  /*padding: 0 !important;*/
  padding-left: 4px !important;
  padding-right: 4px !important;
}

::v-deep .data_details th .cell{
  height: 30px;
  line-height: 30px;
}
::v-deep .plTableBox .el-table--border td, .plTableBox .el-table--border th, .plTableBox .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-right: 0px solid #EBEEF5;
}

</style>
